<template>
	<view class="count poRel">
		<view class="wid100 poAbs" style="height: 449rpx;background: linear-gradient(#e9ffe4, #F6F6F6);top: 0;z-index: 1;"></view>
		<view class="poFix wid100" style="background: #e9ffe4;top: 0;z-index: 11;">
			<!-- 状态栏高度 -->
			<view :style="{ height: `${statusBarHeight}px` }"></view>
			<!-- 自定义导航栏高度 并 居中 -->
			<view class="dis disAl disJuC poRel" :style="{height: `${barHeight}px`}">
				<view class="poAbs" style="width: 32rpx;height: 32rpx;left: 22rpx;" @click="fanhui()">
					<image src="../../../static/fanhui.png" class="wh100"></image>
				</view>
				<view class="foSi35" style="line-height: 36rpx;">余额充值</view>
			</view>
		</view>
		<view :style="{ height: `${statusBarHeight+barHeight+20}px` }"></view>
		<view class="poRel" style="z-index: 2;">
			<view class="wid90 mar borRad20" style="padding: 50rpx 0;" :style="{background:tColor}">
				<view class="wid87 mar">
					<view class="dis disAl">
						<image src="../../../static/jifen2.png" style="width: 50rpx;height: 50rpx;" ></image>
						<view class="mar-left20 f56 fowe600" style="color: #FFC65E;line-height: 50rpx;">{{sl+user.balance}}</view>
					</view>
					<view class="mar-top40 dis disAl">
						<view class="dis disAl disJuC borRad40 foSi25 coFFF" @click="go({url:'czjl'})"
							style="width: 172rpx;height: 52rpx;background-color: #F66F42;">充值记录</view>
						<view class="dis disAl disJuC borRad40 foSi25 coFFF mar-left30" @click="go({url:'yemx'})"
							style="width: 172rpx;height: 52rpx;background-color: #F66F42;">余额明细</view>
					</view>
				</view>
			</view>
			<view v-if="rule.list.length" class="wid90 mar mar-top40 borRad20 bacFFF">
				<view class="wid90 mar">
					<view style="height: 1rpx;"></view>
					<view class="wid90 mar dis disAl disJuB flwa" style="border-bottom: 1rpx dashed #E5E5E5;padding-bottom: 40rpx;">
						<block v-for="(item,index) in rule.list" :key="index">
							<view @click="change(index)" class="dis disAl borRad20 mar-top40" style="width: 259rpx;height: 157rpx;"
							:style="xuan == index?'background-color: '+tColor+';color: #fff;':'background-color: #EEEEEE;'">
								<view class="textCen wid100">
									<view class="foSi40" style="line-height: 40rpx;">¥{{Number(item.money)}}</view>
									<view class="foSI25 mar-top10" :style="xuan == index?'color: #F1A5A9;':'#636161'">{{dw}}</view>
								</view>
							</view>
						</block>
					</view>
					<view class="wid90 mar">
						<view class="dis disAl disJuB" style="height: 110rpx;">
							<view class="dis disAl">
								<image src="../../../static/weixin.png" style="width: 38rpx;height: 31rpx;"></image>
								<view class="mar-left20 foSi30">微信支付</view>
							</view>
							<view v-if="zhifu == 0" class="dis disAl disJuC borRad50" :style="{border: '1rpx solid '+tColor}" 
								style="width: 26rpx;height: 26rpx;">
								<view class="borRad50" :style="{background:tColor}" style="width: 14rpx;height: 14rpx;"></view>
							</view>
							<view v-if="zhifu != 0" class="dis disAl disJuC borRad50" style="width: 26rpx;height: 26rpx;border: 1rpx solid #818181;"></view>
						</view>
					</view>
				</view>
			</view>
			<view class="wid100 bacFFF poFix" style="bottom: 0;box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0,0,0,0.2);">
				<view class="wid90 mar dis disAl disJuB" style="height: 114rpx;">
					<view class="foSi35 fowe600">充值金额：<text :style="{color:tColor}">¥{{xzrule.money || 0.00}}</text></view>
					<view class="hei80 dis disAl disJuC borRad60 coFFF foSi35" @click="save()"
						:style="{background:tColor}" style="width: 232rpx;">充值</view>
				</view>
				<view style="height: 50rpx;"></view>
			</view>
		</view>
		<!-- <view class="yytop t-c" style="border-bottom: 24rpx solid #F6F6F6;">
			<view>可用{{system.custom.balance}}</view>
			<view class="wei f60 mb30" :style="{color:tColor}"><text class="f24 mr10">{{sl}}</text>{{user.balance}}</view>
			<view v-if="recharge.open == 1" @click="go({url:'index'})" class="ma ljcz f-c cf" :style="{background:tColor}">立即充值</view>
		</view>
		<view class="p21 mt30">
			<mg-cell @tab="go({url:'smzf'})" cname="p43 c0" last='1' arrow='1' btt='扫码支付' bttc='f30' ftc="f28" acolor="#9F9F9F">
				<view slot='ft' style="color: #C8CACD;" class="f24 wei mr20">可使用钱包直接支付</view>
			</mg-cell>
			<mg-cell @tab="go({url:'yemx'})" cname="p43 c0" last='1' arrow='1' btt='消费记录' bttc='f30' ftc="f28">
			</mg-cell>
			<mg-cell @tab='cjwt' cname="p43 c0" last='1' arrow='1' btt='储值说明' bttc='f30' ftc="f28">
			</mg-cell>
		</view> -->
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		name: 'yesy',
		components: {},
		data() {
			return {
				statusBarHeight: 0,
				barHeight: 0,
				xuan: 0,
				zhifu: 0,
				xzrule: {},
				rule: {
					list: [],
				},
			}
		},
		onLoad(options) {
			// 状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			// 胶囊数据
			const {top,height} = wx.getMenuButtonBoundingClientRect();
			// 自定义导航栏高度 = 胶囊高度 + 胶囊的padding*2, 如果获取不到设置为38
			this.barHeight = height ? height + (top - this.statusBarHeight) * 2 : 38;
			this.getSystem().then(() => {
				this.util.setNT(this.system.custom.balance)
			})
			this.getLoginInfo()
			this.getConfig({
				key: 'recharge',
				api: 'config',
				params: {
					ident: 'recharge'
				}
			}).then(() => {
				// this.isload = true
				// if (this.recharge.open != 1) {
				// 	uni.showModal({
				// 		title: '提示',
				// 		content: '储值功能已关闭',
				// 		showCancel: false,
				// 		success: (res) => {
				// 			this.go({
				// 				t: 6,
				// 				url: '/yb_wm/index/my-index'
				// 			})
				// 		}
				// 	});
				// }
			})
			this.rechargeRule()
		},
		computed: {
			...mapState({
				recharge: state => state.config.recharge,
			}),
		},
		methods: {
			...mapActions(['getConfig']),
			change(v) {
				this.xuan = v
				this.xzrule = this.rule.list[v]
			},
			async save() {
				if (!await this.checkLogin()) return
				let money = this.xzrule.money
				// console.log('cz', money)
				if (!money) {
					this.util.message('请确定储值金额', 3)
				} else {
					// return
					this.loading = true
					// await this.requestSM('recharge')
					let res = await this.util.request({
						'url': this.api.czxd,
						method: 'POST',
						mask: '下单中',
						data: {
							money: money
						}
					})
					if (!res) {
						this.loading = false
					} else {
						this.go({
							t: 1,
							url: '/yb_wm/other/mg-pay?payObj=' + encodeURIComponent(JSON.stringify({
								orderId: res.data,
								orderType: 2,
								info: {
									money: money,
									type: "储值支付",
									cancel: 1,
									go: {
										t: 4,
										url: "/yb_wm/index/my-index"
									},
								}
							}))
						})
						this.loading = false
					}
				}
			},
			async rechargeRule() {
				let {
					data
				} = await this.util.request({
					'url': this.api.czgz,
				})
				data.list.forEach(v => {
					v.arr = []
					if (v.moneyOpen == 1) {
						v.arr.push(1)
					}
					if (v.integralOpen == 1) {
						v.arr.push(2)
					}
					if (v.growOpen == 1) {
						v.arr.push(3)
					}
					if (v.couponOpen == 1) {
						v.arr.push(4)
					}
					v.arr = v.arr.slice(0, 2)
				})
				// console.log(data.list)
				this.rule = data
				if (data.list.length) {
					this.xuan = 0
					this.xzrule = data.list[0]
				}
			},
			cjwt() {
				this.go({
					t: 1,
					url: `/yb_wm/my/other/gywm?t=储值说明&p=5`
				})
			},
			fanhui(){
				uni.navigateBack(1)
			},
		},
	}
</script>
<style scoped lang="scss">
	.yytop {
		padding: 40rpx;
	}

	.ljcz {
		width: 322rpx;
		height: 80rpx;
	}
</style>
